<template>
  <div class="index">
    <!--    顶部标题栏-->
    <van-nav-bar
        :safe-area-inset-top="true"
        :placeholder="true"
        :fixed="true"
        title="购物袋"
        left-text="返回"
        left-arrow
        @click-right="rightShopcart()"
        @click-left="$router.back()">
      <template #right>
        <span>{{ editStatus === false ? '编辑' : '完成' }}</span>
      </template>
    </van-nav-bar>
    <div class="container">
      <div class="top-img"></div>
      <div class="short">
        <van-checkbox-group v-model="result" ref="checkboxGroup" @change="onchange">
          <div class="list" v-for="(item,index) in shopCartData" :key="index">
            <div class="check">
              <van-checkbox :name="item.sid"></van-checkbox>
            </div>
            <div class="img">
              <img :src="item.small_img" alt="" class="img-auto">
            </div>
            <div class="desc">
              <div class="name">
                <span class="cName">{{ item.name }}</span>
                <span class="rule">{{ item.rule }}</span>
              </div>
              <div class="eNname">
                <span>{{ item.enname |enName }}</span>
              </div>
              <div class="bom">
                <div class="price">
                  <span>{{ item.price }}</span>
                </div>
                <div class="stepper">
                  <van-stepper async-change v-model="item.count" @change="onchangeCount(item)" theme="round"
                               button-size="22"
                               disable-input/>
                </div>
              </div>
            </div>
          </div>
        </van-checkbox-group>
      </div>
    </div>
    <van-divider>哎呀，没有数据可加载了！</van-divider>
    <van-submit-bar style="margin-bottom: 50px" v-if="editStatus==false" button-color="#0c34ba" :price="countPrice"
                    button-text="提交订单"
                    :safe-area-inset-bottom="false"
                    @submit="onSubmit">
      <template #default>
        <van-checkbox v-model="checked" @click="checkAll(checked===false?true:false)">全选</van-checkbox>
      </template>
    </van-submit-bar>
    <div class="edit" v-else>
      <van-submit-bar style="margin-bottom: 50px" button-color="#ee0a24" button-text="删除选项"
                      :safe-area-inset-bottom="false"
                      @submit="removeSubmit">
        <template #default>
          <van-checkbox v-model="checked" @click="checkAll(checked===false?true:false)">全选</van-checkbox>
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import {
  commitShopcart,
  deleteShopcart,
  findAllShopcart,
  modifyShopcartCount,
  removeShopcart,
  shopcartCount
} from "@/api/shopbag";

export default {
  name: "index",
  data() {
    return {
      tokenString: "",
      shopCartData: [],
      result: [],
      checked: false,
      countPrice: 0,
      editStatus: false
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let self = this;
      self.tokenString = self.$cookies.get("tokenString");
      let data = {
        tokenString: self.tokenString
      }
      shopcartCount(data).then(res => {
      })
      findAllShopcart(data).then(res => {
        if (res.data.code === 5000) {
          self.shopCartData = res.data.result;
        } else {
          self.$toast.fail('登录状态异常，请重新登录！')
          self.$router.push('/login');
        }
      })
    }
    ,
    // 提交订单页面
    onSubmit() {
      if (this.result.length === 0) {
        this.$toast('请选择商品！');
      } else {
        this.$router.push({name: 'orderSettlement', query: {sids: JSON.stringify(this.result)}})
      }
    },
    checkAll(val) {
      if (this.checked === true) {
        this.$refs.checkboxGroup.toggleAll(true);
      }
      if (this.checked === false) {
        this.$refs.checkboxGroup.toggleAll(false);
      }
    },
    // 改变选项时
    onchange(val) {
      if (this.shopCartData.length === this.result.length) {
        this.checked = true
      } else {
        this.checked = false
      }
      let self = this;
      let price = 0;
      val.forEach(item => {
        self.shopCartData.forEach((items) => {
          if (item === items.sid) {
            price += items.count * items.price
          }
        })
      })
      this.countPrice = price * 100
    },
    // 修改购物车商品数量接口
    onchangeCount(item) {
      let self = this;
      self.$toast.loading({forbidClick: true});
      let data = {
        appkey: self.appkey,
        tokenString: self.tokenString,
        sid: item.sid,
        count: item.count
      }
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        modifyShopcartCount(data).then(res => {
          self.$toast.clear();
          if (res.data.code === 6000) {
            if (self.result.indexOf(item.sid) === -1) {
            } else {
              self.countPrice += parseFloat(item.price) * 100
            }
          }
        })
      })
    },
    // 点击编辑按钮
    rightShopcart() {
      this.editStatus = !this.editStatus;
    },
    // 删除按钮
    removeSubmit() {
      let self = this;
      let data = {
        appkey: self.appkey,
        tokenString: self.tokenString,
        sids: JSON.stringify(self.result)
      }
      // 逻辑删除
      removeShopcart(data).then(res => {
        if (res.data.code === 7000) {
          self.$toast.success(res.data.msg);
          self.init();
        } else {
          self.$toast.fail('登录状态异常，请重新登录！');
          self.$router.push('/login');
        }
      })
      //   物理删除
      // deleteShopcart(data).then(res => {
      //   if (res.data.code === 7000) {
      //     self.$toast.success(res.data.msg);
      //     self.init();
      //   } else {
      //     self.$toast.fail('登录状态异常，请重新登录！');
      //     self.$router.push('/login');
      //   }
      // })
    }
  }
}
;
</script>

<style scoped lang="less">
.index {
  width: 100%;
  background: #f7f7f7;

  .container {
    .top-img {
      width: 100%;
      background: url("@/assets/images/shopbag_bg.png") no-repeat;
      height: 60px;
      background-size: cover;
    }

    .short {
      margin: 10px;

      .list {
        display: flex;
        //flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        padding: 10px;
        background: #ffffff;
        border-radius: 15px;
        margin: 10px 0;

        .check {
          flex: 1;
          width: 100%;
        }

        .img {
          flex: 2;

          img {
            width: 90px;
            height: 90px;
          }
        }

        .desc {
          flex: 8;
          margin-left: 5px;

          .name {
            font-size: 14px;

            .rule {
              margin-left: 10px;
              color: #999999;
            }
          }

          .eNname {
            font-size: 12px;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 95%;
            white-space: nowrap;
            color: #999999;
            margin: 5px 0;
          }

          .bom {
            margin-top: 10px;
            color: #0c34ba;
            display: flex;
            justify-content: space-between;

            .price {
              font-weight: bold;
              font-size: 18px;
            }

            .stepper {
              /deep/ .van-stepper--round .van-stepper__minus {
                color: #0c34ba;
                background-color: #fff;
                border: 1px solid #0c34ba;
              }

              /deep/ .van-stepper--round .van-stepper__plus {
                color: #fff;
                background-color: #0c34ba;
              }
            }
          }
        }
      }
    }
  }
}

.van-submit-bar__price {
  color: #0c34ba;
  font-weight: 500;
}

.edit {
  display: flex;

  .van-submit-bar__bar {
    justify-content: space-between;
  }
}
</style>
